ボックス制約の処理
Flutter では、ウィジェットはその基礎となるものによってレンダリングされます。RenderBox
オブジェクト。レンダーボックスが提供されます
親による制約があり、その制約内で自分自身のサイズを調整します
制約。制約は最小幅と最大幅で構成されます
そして高さ。サイズは特定の幅と高さで構成されます。
箱は大きく分けて3種類ありますが、 制約をどのように処理するかについては、次のようになります。
- できるだけ大きくなろうとする人たち。
たとえば、次のようなボックスが使用されます。
Center
とListView
。 - 自分の子供と同じ大きさになろうとする人。
たとえば、次のようなボックスが使用されます。
Transform
とOpacity
。 - 特定のサイズになろうとするもの。
たとえば、次のようなボックスが使用されます。
Image
とText
。
たとえば、いくつかのウィジェットContainer
、
コンストラクター引数に基づいて型ごとに異なります。
の場合Container
、デフォルトです
できるだけ大きくなるように努めますが、もしあなたがそれを与えるならば、width
、
たとえば、それを尊重し、その特定のサイズになろうとします。
その他、例えばRow
とColumn
(フレックスボックス)
与えられた制約に基づいて変化します。
以下の「フレックス」セクションで説明されています。
制約が「厳しい」場合もありますが、
つまり、レンダー ボックスが決定する余地は残されていません。
サイズ (たとえば、最小幅と最大幅が同じ場合、
幅が狭いと言われています)。この例としては、App
ウィジェットに含まれるRenderView
クラス: によって返される子によって使用されるボックス
アプリケーションのbuild
関数には制約が与えられます
これにより、アプリケーションのコンテンツ領域を正確に埋めるように強制されます。
(通常は画面全体)。
Flutter のボックスの多く、特に
一人っ子の場合、その制約を子供たちに伝えます。
つまり、多数のボックスを相互にネストすると、
アプリケーションのレンダー ツリーのルートに、
これらの厳しい制約により、それらはすべて互いに正確に適合します。
いくつかのボックス緩む制約、
つまり、最大値は維持されますが、
最小限は削除されます。例えば、Center
。
無制限の制約
特定の状況では、ボックスに与えられる制約は次のとおりです。無制限の、または無限。これは、最大幅または
最大高さは次のように設定されていますdouble.infinity
。
できるだけ大きくしようとする箱は、次のような場合には有効に機能しません。 無制限の制約が与えられ、デバッグ モードでそのような組み合わせが与えられた場合 このファイルを指す例外をスローします。
レンダー ボックスが制限されていないことが判明する最も一般的なケース
制約はフレックスボックス内にあります
(Row
とColumn
)、
とスクロール可能な領域内で(ListView
その他ScrollView
サブクラス)。
特に、ListView
利用可能なスペースに合わせて拡張しようとします
その横方向(たとえば、
縦スクロールブロックの場合、
親と同じ幅にしようとします)。
縦スクロールをネストした場合ListView
横スクロールの中ListView
、
内側のものはできるだけ広くしようとします、
それは無限に広く、
外側のものはその方向にスクロール可能であるためです。
フレックス
フレックスボックス自体(Row
とColumn
)
にいるかどうかに基づいて異なる動作をする
有界制約または無境界制約
彼らに与えられた方向性。
有界制約では、 彼らはその方向でできるだけ大きくなろうとします。
無制限の制約では、
彼らは子供たちをその方向に合わせようとします。
この場合は設定できませんflex
子供たちに
0以外のもの。
ウィジェット ライブラリでは、これは使用できないことを意味します。Expanded
フレックスボックスが内側にある場合
別のフレックスボックスまたはスクロール可能なボックス内。もし、するなら、
このドキュメントを示す例外メッセージが表示されます。
の中にクロス方向、たとえば幅方向Column
(垂直フレックス) または高さのRow
(水平方向のフレックス)、無制限であってはなりません。
そうしないと、子供たちを合理的に調整することができなくなります。